<template>
  <div class="app-container" v-loading="loading">
    <div class="filter-container">
      <el-input
        style="width: 200px"
        type="tel"
        class="filter-item"
        placeholder="订单号"
        v-model="queryList.orderNumber" @keyup.enter.native="search"></el-input>
      <el-date-picker
        v-model="searchTime"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd">
      </el-date-picker>
      <el-button type="primary" icon="el-icon-search" class="filter-item" @click="search">搜索</el-button>
    </div>
    <div class="action-container">
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="orderNumber"
        label="订单编号">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="下单时间">
      </el-table-column>
      <el-table-column
        prop="deskName"
        label="桌号">
      </el-table-column>
<!--      <el-table-column-->
<!--        prop="phone"-->
<!--        label="用户手机号">-->
<!--      </el-table-column>-->
      <el-table-column
        prop="goodsAmount"
        label="菜份数">
      </el-table-column>
      <el-table-column
        prop="money"
        label="订单金额(元)">
      </el-table-column>
      <el-table-column
        prop="actPayMoney"
        label="实付金额(元)">
      </el-table-column>
      <el-table-column
        prop="payWay"
        label="支付方式">
        <template slot-scope="scope">
          <template v-if="scope.row.payWay===2">微信</template>
          <template v-else>现金支付</template>
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="订单状态">
        <template slot-scope="scope">
          <template v-if="scope.row.status===1">下单</template>
          <template v-else-if="scope.row.status===2">支付成功</template>
          <template v-else-if="scope.row.status===3">退款</template>
          <template v-else-if="scope.row.status===3">退款申请</template>
          <template v-else-if="scope.row.status===4">退款成功</template>
          <template v-else-if="scope.row.status===5">退款失败</template>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="270">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="showOrderDetailDialog(scope.row)">查看详情
          </el-button>
          <template v-if="scope.row.status===3">
            <el-button
              size="mini"
              type="success"
              @click="refund(scope.row.id,4)"
            >同意
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="refund(scope.row.id,5)"
            >拒绝
            </el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total-elements="totalElements"
      :change-callback="getOrderList"
      ref="page"></pagination>
    <!--设置默认分享活动样式模态框-->
    <el-dialog
      title="订单详情"
      :visible.sync="orderDetailDialog"
    >
      <el-form :model="orderDetail">
        <el-form-item label="订单状态" :label-width="formLabelWidth">
          <el-input v-model="orderDetail.status"></el-input>
        </el-form-item>
        <el-form-item label="订单编号" :label-width="formLabelWidth">
          <el-input v-model="orderDetail.orderNumber"></el-input>
        </el-form-item>
        <el-form-item label="下单时间" :label-width="formLabelWidth">
          <el-input v-model="orderDetail.createTime"></el-input>
        </el-form-item>
        <el-form-item label="顾客人数" :label-width="formLabelWidth">
          <el-input v-model="orderDetail.cusAmount"></el-input>
        </el-form-item>
        <el-form-item label="餐桌编号" :label-width="formLabelWidth">
          <el-input v-model="orderDetail.deskName"></el-input>
        </el-form-item>
        <el-table :data="orderItemList">
          <el-table-column property="name" label="菜品名称" width="200"></el-table-column>
          <el-table-column property="amount" label="数量"></el-table-column>
          <el-table-column property="unitPrice" label="单价"></el-table-column>
        </el-table>
        <el-form-item label="订单金额" :label-width="formLabelWidth">
          <el-input v-model="orderDetail.money"></el-input>
        </el-form-item>
        <el-form-item label="实付金额" :label-width="formLabelWidth">
          <el-input v-model="orderDetail.actPayMoney"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import {getOrderList, getOrderDetail, refund} from '../api/order'
  import pagination from '@/components/pagination/index'

  export default {
    components: {pagination},
    name: 'user',
    data() {
      return {
        loading: false,
        btnLoading: false,
        totalElements: 0, // 数据条数
        queryList: {
          orderNumber: '',
          phone: ''
        }, // 搜素数据
        orderDetail: {
          status: '',
          orderNumber: '',
          createTime: '',
          cusAmount: '',
          deskName: '',
          money: '',
          actPayMoney: ''
        },
        orderItemList: [],
        orderItemListDialog: true,
        tableData: [], // 表格数据
        formLabelWidth: '120px',
        searchTime: '',
        options: [],
        orderDetailDialog: false,

      }
    },
    mounted() {
      this.initTime();
      this.getOrderList()
    },
    methods: {
      //时间初始化
      initTime() {
        let date = new Date();
        let date1 = new Date(date.getTime() + 1000 * 60 * 60 * 24);
        let end = date1.getFullYear() + '-' + (date1.getMonth() + 1) + '-' + date1.getDate();
        let lw = new Date(date - 1000 * 60 * 60 * 24 * 30);
        let lastY = lw.getFullYear();
        let lastM = lw.getMonth() + 1;
        let lastD = lw.getDate();
        let start = lastY + "-" + (lastM < 10 ? "0" + lastM : lastM) + "-" + (lastD < 10 ? "0" + lastD : lastD);
        this.searchTime = [start, end];
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      /*
       * 获取订单列表
       * */
      getOrderList(number, pageSize) {
        this.loading = true
        getOrderList(number, pageSize, this.queryList, this.searchTime[0], this.searchTime[1]).then(response => {
          let data = response.obj
          console.log(data)
          this.totalElements = data.totalElements
          this.tableData = data.content
          setTimeout(() => {
            this.loading = false
          }, 500)
        }).catch(() => {
          this.loading = false
        })
      },
      //显示订单详情
      showOrderDetailDialog(row) {
        if (row.status == 1) {
          this.orderDetail.status = '下单'
        }
        if (row.status == 2) {
          this.orderDetail.status = '支付成功'
        }
        this.orderDetail.orderNumber = row.orderNumber,
          this.orderDetail.createTime = row.createTime,
          this.orderDetail.deskName = row.deskName,
          this.orderDetail.cusAmount = row.cusAmount,
          //获取订单详情
          getOrderDetail(row.id).then(response => {
            let data = response.obj;
            console.log('111' + data)
            this.orderItemList = data
          })
        this.orderDetail.money = row.money,
          this.orderDetail.actPayMoney = row.actPayMoney,
          this.orderDetailDialog = true
      },

      //设置默认打印机
      refund(orderId,status) {
        this.$confirm('是否确认操作？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          refund(orderId,status).then(response => {
            this.$message({
              message: response.msg,
              type: 'success',
              duration: 1000
            })
            this.$refs.page.search()
          }).catch(() => {
            this.loading = false
          })
        })
      },

      /*
      * 搜索
      * */
      search() {
        this.$refs.page.search()
      },
    }
  }
</script>

<style scoped>
  body .el-table th.gutter {
    display: table-cell !important;
  }

  .dialog_body {
    width: 100%;
    height: 300px;
    overflow: auto
  }

  .dialog_body_data {
    padding: 10px;
  }
</style>
